<!--
 * @Description: 文本样式
 * @Author: rendc
 * @Date: 2025-09-12 10:12:27
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-12 14:41:23
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本样式</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <div style="text-decoration: underline;">下划线</div>
  <div><a href="" style="text-decoration: none;color: black;">下划线</a></div>

  <div style="text-decoration: line-through;">原价：9999</div>
  <div style="">现价：9.99</div>
  <br>
  <div style="text-decoration: overline;">上划线</div>
  <div><a href="">下划线</a></div>
  <div style="text-indent: 2em;">文本缩进</div>
  <!--  -->
  <div style="text-transform:lowercase">ABC</div>
  <div style="text-transform:uppercase">abc</div>
  <div style="text-transform:capitalize">hello world</div>
  <div style="text-shadow:2px 2px 1px #999">
    <div>
      text-shadow
    </div>
    h-shadow :必需。⽔平阴影的位置。允许负值。
    v-shadow :必需。垂直阴影的位置。允许负值。
    blur:可选。模糊的距离。
    color:可选。阴影的颜⾊。
  </div>

  <div style="border:1px solid red;text-align: center;height: 5em;line-height: 5em;">
    line-height
  </div>

  <div
    style="border:1px solid red;text-align: center;height: 5em;line-height: 5em;width: 30%;display: inline-block;opacity:0">
    display1
  </div>

  <div style="border:1px solid red;text-align: center;height: 5em;line-height: 5em;width: 30%;display: none;">
    display2
  </div>

  <div style="border:1px solid red;text-align: center;height: 5em;line-height: 5em;width: 30%;display: inline-block;">
    display3
  </div>

  <div
    style="border:1px solid red;text-align: center;height: 5em;line-height: 5em;width: 30%;display: inline-block;visibility: hidden;">
    display4
  </div>

  <div style="border:1px solid red;text-align: center;height: 5em;line-height: 5em;width: 30%;display: inline-block;">
    display5
  </div>

  <div
    style="border:1px solid red;text-align: center;height: 5em;line-height: 5em;width: 200px;display: inline-block;overflow-x: auto;overflow-y: auto;">
    <div style="border:1px solid yellowgreen;width: 500px;">
      display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1display6-1
      <br>
      display6-2
      <br>
      display6-3
    </div>
  </div>
  <div style="cursor:pointer">
    鼠标光标样式
  </div>
</body>

</html>